<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo</title>
<script type="text/javascript" src="http://a.tbcdn.cn/??s/kissy/1.3.0/seed-min.js" data-config="{combine:true}"></script>
<link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.3.0/css/dpl/base.css" />
<link rel="stylesheet" href="http://a.tbcdn.cn/apps/ks/zoo/slide/demo/img/d4.css" />
<style>
body {
	background:white;
}

#example {
	margin-left:auto;
	margin-right:auto;
	width:600px;
}
.tab-content {
	height:270px;
}
.tab-pannel {
	height:270px;
	position:relative;
}
.tab-pannel .tbg {
	width:100%;
	height:100%;
}

.pr {
	position:relative;
}

.pa {
	position:absolute;
}

.sublayer1-1 {
	top:-62px;
	left:62px;
	width:171px;
}

.sublayer1-2 {
	top:-78px;
	left:384px;
	width:253px;
}

.sublayer1-3 {
	top:145px;
	left:237px;
	font-size:40px;
}

.sublayer1-4 {
	top:201px;
	font-size:21px;
	left:189px;
	color:green;
}

.sublayer1-5 {
	top:229px;
	font-size:19px;
	left:232px;
	color:olive;
	display:block;
	width:223px;

}

.sublayer2-1 {
	top:41px;
	left:56px;
	width:206px;
}

.sublayer2-2 {
	top:50px;
	left:310px;
	height:39px;
}

.sublayer2-3 {
	top:95px;
	left:320px;
	height:37px;
}

.sublayer2-4 {
	top:146px;
	left:342px;
	height:28px;
}

.sublayer3-1 {
	width:171px;
	top:117px;
	left:214px;
}

.sublayer3-2 {
	top:65px;
	left:277px;
	width:235px;
}

.sublayer3-3 {
	top:142px;
	left:336px;
	width:193px;
}

.sublayer3-4 {
	top:25px;
	left:274px;
	width:100px;
}

.sublayer3-5 {
	top:99px;
	left:17px;
}

.sublayer3-6 {
	top:154px;
	left:17px;
}

.sublayer3-7 {
	top:185px;
	left:17px;
}

.pn1 {
	text-shadow:0 1px 0 rgba(255,255,255,.8);
	-webkit-font-smoothing: subpixel-antialiased;
}
.pn3 {

}
.pn3 h2 {
	background-color:#036d99;
	padding-left:5px;
	padding-right:5px;
	font-family:tahoma;
	font-size:17px;
	color:white;
}

.pagination {
	width:45px;
}
</style>


</head>
<body>


<div id="example">
	<div id="slides"><!--Slide控件开始-->
		<div class="slides_container tab-content">
			<div class="tab-pannel pn1">
				<img class="tbg" src="http://img04.taobaocdn.com/tps/i4/T1e1h2XAlcXXXabqsu-1000-500.jpg">
				<img class="pa sublayer1-1" src="http://img02.taobaocdn.com/tps/i2/T1c_41XudeXXa8YrnC-260-296.png" alt="sublayer" rel="alpha: false,slideindirection: top, offsetin:160,durationin: 1000,easingin:easeBoth,slideoutdirection:bottom,offsetout:160,durationout:1000,easingout:easeBoth">
				<img class="pa sublayer1-2" src="http://img03.taobaocdn.com/tps/i3/T1MaX2XqxeXXa4cDZu-534-526.png" alt="sublayer" rel="alpha: false,slideindirection: top, offsetin:180,durationin: 2100,easingin:easeBoth,slideoutdirection:bottom,offsetout:180,durationout:2100,easingout:easeBoth">
				<h1 class="pa sublayer1-3" alt="sublayer" rel="alpha: true,slideindirection: top, offsetin:130,durationin: 3300,easingin:elasticOut,delayin:700,slideoutdirection:bottom,offsetout:130,durationout:3300,easingout:backOut,delayout:700">
					LayerSlider
				</h1>
				<h2 class="pa sublayer1-4" alt="sublayer" rel="alpha: true,slideindirection: left, offsetin:400,durationin: 1500,easingin:backOut,delayin:1500,slideoutdirection:right,offsetout:400,durationout:1500,easingout:backOut,delayout:1500">
					The smartest slideshow plugin
				</h2>
				<h2 class="pa sublayer1-5" alt="sublayer" rel="alpha: true,slideindirection: left, offsetin:400,durationin: 1500,easingin:backOut,delayin:1700,slideoutdirection:right,offsetout:400,durationout:1500,easingout:backOut"> 
					with breathtaking effects!
				</h2>
			</div>
			<div class="tab-pannel">
				<img class="tbg" src="http://img03.taobaocdn.com/tps/i3/T1W9t1XsleXXXabqsu-1000-500.jpg">
				<img class="pa sublayer2-1" src="http://img01.taobaocdn.com/tps/i1/T1IQX1XqXfXXa_ofAH-435-366.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:800,durationin: 1800,easingin:backOut,delayin:300,slideoutdirection:left,offsetout:800,durationout:1800,easingout:backOut,delayout:300">
				<img class="pa sublayer2-2" src="http://img01.taobaocdn.com/tps/i1/T17jl3XpNXXXXesNfH-337-74.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:300,durationin: 1000,easingin:backOut,delayin:1200,slideoutdirection:left,offsetout:300,durationout:1000,easingout:backOut,delayout:1200">
				<img class="pa sublayer2-3" src="http://img02.taobaocdn.com/tps/i2/T1O0J1XuhfXXc_Blbt-249-59.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:300,durationin: 1000,easingin:backOut,delayin:1400,slideoutdirection:left,offsetout:300,durationout:1000,easingout:backOut,delayout:1400">
				<img class="pa sublayer2-4" src="http://img01.taobaocdn.com/tps/i1/T1u5x1XtxeXXafArbk-209-55.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:300,durationin: 1000,easingin:backOut,delayin:1600,slideoutdirection:left,offsetout:300,durationout:1000,easingout:backOut,delayout:1600">
			</div>
			<div class="tab-pannel pn3">
				<img class="tbg" src="http://img02.taobaocdn.com/tps/i2/T1d3V2Xt0cXXXabqsu-1000-500.jpg">
				<img class="pa sublayer3-1" src="http://img01.taobaocdn.com/tps/i1/T14xx2XDVbXXb2zkgm-209-163.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:400,durationin: 1000,easingin:easeBoth,delayin:600,slideoutdirection:left,offsetout:400,durationout:1000,easingout:easeBoth,delayout:600">
				<img class="pa sublayer3-2" src="http://img03.taobaocdn.com/tps/i3/T1aah3XztaXXb9nfbu-361-257.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:420,durationin: 1000,easingin:easeBoth,delayin:800,slideoutdirection:left,offsetout:420,durationout:1000,easingout:easeBoth,delayout:800">
				<img class="pa sublayer3-3" src="http://img02.taobaocdn.com/tps/i2/T10gt2XvRdXXX0IBL9-488-348.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:300,durationin: 1000,easingin:easeBoth,delayin:1000,slideoutdirection:left,offsetout:300,durationout:1000,easingout:easeBoth,delayout:1000">
				<img class="pa sublayer3-4" src="http://img04.taobaocdn.com/tps/i4/T1zHX2XtddXXad1kZK-195-152.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:410,durationin: 1000,easingin:easeBoth,delayin:700,slideoutdirection:left,offsetout:410,durationout:1000,easingout:easeBoth,delayout:700">

				<h2 class="pa sublayer3-5" alt="sublayer" rel="alpha: false,slideindirection: bottom, offsetin:410,durationin: 1000,easingin:backOut,delayin:1500,slideoutdirection:top,offsetout:410,durationout:1000,easingout:backOut,delayout:1500">
					You can customize the plugin
				</h2>
				<h2 class="pa sublayer3-6" alt="sublayer" rel="alpha: false,slideindirection: bottom, offsetin:410,durationin: 1000,easingin:backOut,delayin:1700,slideoutdirection:top,offsetout:400,durationout:1000,easingout:backOut,delayout:1700"> 
					You can modify the easing,
				</h2>
				<h2 class="pa sublayer3-7" alt="sublayer" rel="alpha: false,slideindirection: bottom, offsetin:410,durationin: 1000,easingin:backOut,delayin:1900,slideoutdirection:top,offsetout:410,durationout:1000,easingout:backOut,delayout:1000"> 
					delay, duration and parallax effect.
				</h2>
			</div>
		</div>
		<a href="javascript:void(0);" class="prev" id="J_pre"><img src="http://img03.taobaocdn.com/tps/i3/T1l.X1XyJdXXcVgvYb-24-43.png" width="24" height="43" alt="Arrow Prev"></a>
		<a href="javascript:void(0);" class="next" id="J_next"><img src="http://img02.taobaocdn.com/tps/i2/T1JWt3XqBaXXcVgvYb-24-43.png" width="24" height="43" alt="Arrow Next"></a>
		<ul class="tab-nav pagination">
			<li>
				<a href="javascript:void(0);">1</a>
			</li>
			<li>
				<a href="javascript:void(0);">2</a>
			</li>
			<li>
				<a href="javascript:void(0);">3</a>
			</li>
		</ul>
	</div><!--Slide控件结束-->
	<img src="http://img02.taobaocdn.com/tps/i2/T1DX41Xv4gXXc6k5om-739-341.png" width="739" height="341" alt="Example Frame" id="frame">
</div>




<script>
    var S = KISSY;
	var srcPath = "../../../";
	S.config({
		packages:[
			{
				name:"gallery",
				path:srcPath,
				charset:"utf-8",
				combine:false,
				tag:S.now(),
				ignorePackageNameInUri:true,
				debug:true
			}
		]
	});
KISSY.use('gallery/slide/1.1/',function(S,Slide){
	var C = new Slide('slides',{
		autoSlide:false,
		effect:'hSlide',
		timeout:6000,
		speed:700,
		selectedClass:'current',
		carousel:true,
		touchmove:true,
		layerSlide:true
	});

	// C.go(2);

	S.one('#J_pre').on('click',function(e){
		e.halt();
		C.previous().stop().play();
	});
	S.one('#J_next').on('click',function(e){
		e.halt();
		C.next().stop().play();
	});

});
</script>

</body>
</html>
